<template>
	<div v-if="isShow">
		<div class="tags">
			<div class="tabList">
				<template v-for="(tag, index) in languageList">
					<div :class="newTagId === tag.id ? 'tab_item active' : 'tab_item'" @click="onTag(tag, index)">
						{{ tag.name }}
					</div>
				</template>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	props: {
		isShow: {
			default: false
		},
		tagId: null //标签id
	},
	components: {},
	data() {
		return {
			newTagId: null
		};
	},
	computed: {
		languageList() {
			return this.$store.getters.languageList.length > 0 ? this.$store.getters.languageList : JSON.parse(localStorage.getItem('languageList'))
		}
	},
	watch: {
		tagId: {
			handler(val) {
				if (val) {
					this.newTagId = this.tagId
				}
			},
			deep: true
		}
	},
	mounted() {
		// 首次调用组件先在此赋值
		if (this.tagId) {
			this.newTagId = this.tagId
		}

	},
	created() {
		console.log('created')
	},
	methods: {
		onTag(tar) {
			this.$emit('tagClick', tar.id)
		}
	}
};
</script>

<style lang="scss" scoped>
.tags {
	width: 100%;
	height: auto;
	background: #f5f7fa;
	border: 1px solid #dfe4ed;

	&>.tabList {
		width: 100%;
		height: 100%;
		overflow: hidden;
		// scrollbar-width: none; //横向滚动条
		display: flex;
		justify-content: flex-start;
		white-space: nowrap;
		overflow-x: auto;
		border-radius: 4px 4px 0 0;
		border-bottom: none;
		box-sizing: border-box;

		&>.tab_item {
			padding: 0 20px;
			font-size: 14px;
			height: 41px;
			line-height: 41px;
			border-right: 1px solid #dfe4ed;
			cursor: pointer;
		}

		.active {
			border-bottom: none;
			background-color: #fff;
			color: #DFB771;
		}
	}
}
</style>
